<template>
	<view :class="['sticker', zClass]" :style="{'height': height + 'px'}">
		<view :class="[isStick?'stick':'']" :style="{'margin-top':marginTop}">
			<slot/>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			'zClass':{type:String},
			'scrollTop':{type:Number, default:0},
			'index':{type:Number, default:0},
			'styleTop':{type:Number}
		},
		mounted() {
			this.$nextTick(()=>{
				// #ifdef MP-WEIXIN
				uni.createSelectorQuery().in(this).selectAll('.sticker').boundingClientRect(res => {
					this.height = res[0].height
					this.top = res[0].top
				}).exec()
				// #endif
				// #ifndef MP-WEIXIN
				uni.createSelectorQuery().selectAll('.sticker').boundingClientRect(res => {
					this.height = res[this.index].height
					this.top = res[this.index].top
				}).exec()
				// #endif
			})
		},
		data(){
			return{
				top: 0,
				height: null
			}
		},
		computed:{
			marginTop(){
				return this.isStick&&this.styleTop ? this.styleTop+'px' : 0
			},
			isStick(){
				if(this.top<this.scrollTop)return true
				return false
			}
		}
	}
</script>

<style lang="scss">
	.sticker{
		.stick{
			position: fixed;
			z-index: 50;
			width: 100%;
			left: 0;
			top: 0;
		}
	}
</style>
